<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      v-model="searchVal"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/searchPopup')"
    />
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="blue"
      :loop="false"
    >
      <!-- 轮播 -->
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img
          :src="item.image_url"
          width="100%"
          :style="{ display: 'block' }"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :column-num="5">
      <van-grid-item
        :icon="item.icon_url"
        :text="item.name"
        v-for="item in channel"
        :key="item.id"
      />
    </van-grid>

    <!-- 品牌制造商直供 -->
    <div class="brand">
      <div class="home_title">品牌制造商直供</div>
      <ul>
        <li v-for="item in brandList" :key="item.id">
          <img :src="item.pic_url" alt="" />
          <h4>{{ item.name }}</h4>
          <p>{{ item.floor_price | RMB }}</p>
        </li>
      </ul>
    </div>

    <!-- 周一周四·新品首发 -->
    <div class="new">
      <div class="new-title">周一周四·新品首发</div>
      <van-grid :border="false" :column-num="2" class="newProduct">
        <van-grid-item v-for="item in newGoodsList" :key="item.id">
          <van-image :src="item.list_pic_url" />
          <p>{{ item.name }}</p>
          <span>{{ item.retail_price | RMB }}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 热门推荐 -->
    <div class="hot">
      <div class="home-title">人气推荐</div>
      <van-card
        v-for="item in hotGoodsList"
        :key="item.id"
        :price="item.retail_price"
        :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
      />
    </div>

    <!-- 专题精选 -->
    <div class="topic">
      <div class="topic-title">专题精选</div>
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item
          v-for="item in topicList"
          :key="item.id"
          class="title-pic"
        >
          <img :src="item.scene_pic_url" alt="" width="100%" height="200" />
          <span>{{ item.title }} </span
          ><span class="title-color">{{ item.price_info | RMB }}起</span>
          <p class="title-p">{{ item.subtitle }}</p>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 分类 -->
    <div class="new" v-for="item in categoryList" :key="item.id">
      <div class="home-title">{{ item.name }}</div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="e in item.goodsList" :key="e.id">
          <van-image :src="e.list_pic_url" />
          <p>{{ e.name }}</p>
          <span>{{ e.retail_price | RMB }}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 搜索滑动 -->
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// // @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { GetHomeDataList } from "@/request/api.js";
// import request from "@/request/request.js";
export default {
  name: "Home",
  data() {
    return {
      searchVal: "",
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },

  created() {
    GetHomeDataList()
      .then((res) => {
        console.log("then中的res是：", res.data.banner);
        //请求成功
        this.banner = res.data.banner;
        this.channel = res.data.channel;
        this.brandList = res.data.brandList;
        this.newGoodsList = res.data.newGoodsList;
        this.hotGoodsList = res.data.hotGoodsList;
        this.topicList = res.data.topicList;
        this.categoryList = res.data.categoryList;
      })
      .catch((err) => {
        // console.log("请求失败了执行");
        console.log(err);
      });
  },

  components: {},
  filters: {
    RMB(val) {
      return `￥${val.toFixed(2)}元`;
    },
  },
};
</script>
<style lang="less" scoped>
.brand {
  margin-top: 0.2rem;
  background-color: #ffff;
  margin-bottom: 0.2rem;

  .home_title {
    text-align: center;
    width: 100%;

    line-height: 0.5rem;
    margin-bottom: 0.05rem;
  }

  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 49%;
      position: relative;
      h4,
      p {
        position: absolute;
        left: 0.2rem;
        top: 0.1rem;
      }
      p {
        top: 0.4rem;
        color: red;
      }
      img {
        width: 100%;
      }
    }
  }
}
.new {
  margin-bottom: 0.2rem;
}
.new-title {
  text-align: center;
  width: 100%;
  background-color: #fff;
  line-height: 0.5rem;
  margin-bottom: 0.05rem;
}

.home-title {
  text-align: center;
  width: 100%;
  background-color: #fff;
  margin-bottom: 0.05rem;
  line-height: 0.5rem;
}
.hot {
  background-color: #fff;
}
.topic {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  .topic-title {
    text-align: center;
    width: 100%;
    background-color: #fff;
    line-height: 0.5rem;
  }
  .title-color {
    color: red;
  }
  .title-p {
    padding-top: 0.05rem;
    font-size: 0.14rem;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
  }
}
.title-pic {
  margin: 0 5px 0 0;
  background-color: #fff;
}
.new {
  background-color: #fff;
  p {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  span {
    color: red;
    font-size: 0.16rem;
    margin-top: 0.05rem;
  }
}
.slide-enter,
.slide-leave-to {
  //滑入滑出
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 1s;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
</style>
